<template>
	<echartsFlowSale :pop='pop'  ref="echartsRef" :option="option" :loading="loading" :loadingText="loadingText" >
    <slot></slot>
  </echartsFlowSale>
</template>
<style lang="scss">
</style>
<script>
let moment = require("moment"); 
import echartsFlowSale from "@/components/real-time/real-time-module/common/echartsFlowSale";
export default {
  components: {
      echartsFlowSale:echartsFlowSale
  },
  props:{
    GetData:{},
    isdemo:{
      type:Boolean,
      default:function(){
        return false
      }
    }
  },
  data(){
    return {
      pop:{
      	title: "销售数据",							//报表标题
				helphint:[
						{title:"销售数据",text:""},				//第一条信息为提示标题 不给text
						{title:"销售金额",text:"：选择的日期跨度内销售总额"},
						{title:"成交率",text:"：(成交量 / 进入客流)*100"},
				]
      },
      realData:{
          company_ids:'',//企业id
          case_ids:'',//案场id
          idsType:0,//企业或案场标记：0：为只选择了企业id，1：为选择了案场id
          start_day:moment(new Date()).format("YYYY-MM-DD"),
          end_day:moment(new Date()).format("YYYY-MM-DD"),
      },
      option:{
          grid:{
            left:'10%',
            right:'10%',
            top:'10%',
            bottom:"10%"
          },
          tooltip: {
            trigger: 'axis'
          },
          color:['#ffec8c','#1145c2'],
          xAxis: {
            type: 'category',
            axisLabel:{
              color:'#5888bf'
            },
            data:[]
          },
          yAxis:[
            {
              position: 'left',
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#5888bf'
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#515254'
                }
              },
              type: 'value'
            },
            {
              type:'value',
              position: 'right',
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#5888bf'
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false,
              },
              offset: 0,
              axisLabel: {
                formatter: '{value}' + '%'
              }
            }
          ],
          legend: {
            data:['销售金额','成交率'],
            top:'5px',
            textStyle:{
              color:'#5888bf'
            },
            inactiveColor:'#4D4D4D'
          },
          series: [
            {
              name: '销售金额',
              data: [],
              type: 'bar',
              barMaxWidth: '12px',
              yAxisIndex: 0,
            },
            {
              name: '成交率',
              data: [],
              type: 'bar',
              barMaxWidth: '12px',
              yAxisIndex: 1,
            }
          ]
      },
      loading:false,
      loadingText:'加载中...',
      start_hm:'00:00',
      end_hm:'23:59',
      global:null,
      xykpis:['actual_sales','sold_rate'],
      shake:false
    }
  },
  created() {},
  mounted() {
     if(this.isdemo)
    {
      this.option.grid.right="16%";
      this.option.xAxis.data=['08/10 09:00','08/10 10:00','08/10 11:00','08/10 12:00','08/10 13:00','08/10 14:00','08/10 15:00','08/10 16:00','08/10 17:00','08/10 18:00','08/10 19:00','08/10 20:00'];
      this.option.series[0].data=[18888,28888,16666,26666,38888,48888,58888,68888,56666,46666,36666,66666];
      this.option.series[1].data=[69.2,72.7,66.8,66.5,56.5,46.6,67.6,72.6,55.3,88.5,46.2,71.2];
      this.$refs.echartsRef.setOption();
      this.loading=false;
    }
  },
  beforeDestroy()
  {
  },
  methods: {
    getData(){
      let ids = this.realData.idsType ? this.realData.case_ids : this.realData.company_ids;
      ids = ids.split(',');
      let tags=0;
      if(this.global.type=='chain')
      {
        tags=2;
      }
      else if(this.global.type=='mall')
      {
        tags=1;
      }
      let group_type=this.realData.idsType ?'case':'company';
      let url = '/sys/report_new/time_division_sum?group_type='+group_type+'&tags=' + tags +
        '&indicator_keys=' + this.xykpis + '&start_day=' + this.realData.start_day + '&end_day=' + this.realData.end_day +
        '&start_hm=' + this.start_hm + '&end_hm=' + this.end_hm;
      let params = {
        org_id_list: ids,
        org_type: this.realData.idsType + 1
      }
        this.$api.post(url,params)//案场分时报表(根据企业ID数组或案场ID数组)
        .then(data => {
          if(data == '10001'){
            this.$refs.echartsRef.setOption(true);
            this.loadingText = '无该指标权限';
            this.shake = false
            return
          }
          if (data&&data.data.sum_list&&data.data.sum_list.length) {
              let _data = data.data;
              let sum_list = _data.sum_list || []
              let xData = [];
              let Ydata1 = [];
              let Ydata2 = [];
              for (let i in sum_list) {
                xData.push(sum_list[i].time_tag);
                Ydata1.push(sum_list[i].actual_sales);//销售金额
                Ydata2.push(sum_list[i].sold_rate);//成交率
              }
              this.option.xAxis.data=[...new Set(xData)];
              this.option.series[0].data=Ydata1;
              this.option.series[1].data=Ydata2;
              let leftMax=Ydata1.reduce((a,b)=>{
                return b>a?b:a;
              });
              leftMax=Math.ceil(leftMax);
              this.option.grid.left=leftMax.toString().length>5?leftMax.toString().length+'9':'10%';
              
              this.$nextTick(() => {
                this.$refs.echartsRef.setOption();
                this.loading = false;
              })
          }
          else{
            this.loadingText = '无数据';
            this.$refs.echartsRef.setOption(true);
          }
          this.shake = false
        })
        .catch(err=>{
           console.log(err);
          this.loadingText = '无数据';
          this.$refs.companySaleRef.setOption(true);
          this.shake = false
        })
    },
    
    
  },
  watch: {
    GetData:{
      handler(val){
        if(this.shake && val.index != 0){
          return
        }
        if(val){
          this.realData = val.realHeaderData;
          this.global = val.global;
          this.loading = true;
          this.shake = true
          if(!this.realData.company_ids.length){
            this.$refs.echartsRef.setOption(true);
            this.loadingText = '无数据';
            this.shake = false
            return
          }else{
            this.loadingText = '加载中...';
            this.getData();
          }
        }
      },
      deep:true
    }
  },

};
</script>
